<template>
  <div>
    <h2>Job List</h2>

    <el-button type="text" style="float:left" size="small" @click="goToAddJobPage()">新增</el-button>
    <el-table :data="jobs">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="_describe" label="描述"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column prop="end_time" label="结束时间"></el-table-column>
      <el-table-column label="Actions" width="180">
        <template #header>
          <span>操作</span>
        </template>
        <template #default="scope">
          <el-button type="text" size="small" @click="deleteJob(scope.row.id)">删除</el-button>
          <el-button type="text" size="small" @click="editJob(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const jobs = ref([]);
import { useRouter } from 'vue-router'; // 引入useRouter
const router = useRouter(); // 初始化路由器
onMounted(async () => {
  const response = await axios.post('/api/query_job_list');
  if (response.data.code === 200) {
    jobs.value = response.data.data;
  }
});

async function deleteJob(id) {
  if (confirm('Are you sure to delete?')) {
    try {
      await axios.post('/api/delete_job', { id });
      // Refresh the list after deletion
      const refreshResponse = await axios.post('/api/query_job_list');
      if (refreshResponse.data.code === 200) {
        jobs.value = refreshResponse.data.data;
      }
    } catch (error) {
      console.error(error);
      alert('Delete failed');
    }
  }
}


const goToAddJobPage = () => {
  router.push('/add-job'); // 替换为你的路由名称
};




</script>

<style scoped>
.field-gap {
  display: inline-block;
  white-space: nowrap;
  margin-right: 10em;
}
</style>
